﻿@{
    ViewBag.Title = "Home Page";
}
<script type="text/javascript">
    var support = "MozWebSocket" in window ? 'MozWebSocket' : ("WebSocket" in window ? 'WebSocket' : null);
    var websocket;
    var isKeyDown = false;
    var LWcanvas;
    var LWctx;
    var paintDiameter = 2;
    var paintColor = "#f00";
    var undoRecord = [];
    var isController;
    var doNext = true;
    var isControllerTimeoutId;
    window.onload = function () {
        var wsServer = 'ws://@(Request.Url.Host):@(ViewBag.ExtPort)/ppt';
        websocket = new window[support](wsServer);
        websocket.onopen = function (evt) { onOpen(evt) };
        websocket.onclose = function (evt) { onClose(evt) };
        websocket.onmessage = function (evt) { onMessage(evt) };
        websocket.onerror = function (evt) { onError(evt) };
    }
    function onOpen(evt) {
        console.log("Connected to WebSocket server.");
    }
    function onClose(evt) {
        console.log("Disconnected");
    }
    function onMessage(evt) {
        var data = evt.data.split('|');
        var canvasOffset = $(LWcanvas).offset();
        if (data[0] == "move") {
            LWctx.moveTo(data[1], data[2]);
        }
        else {
            LWctx.strokeStyle = paintColor;
            LWctx.lineTo(data[1], data[2]);
            LWctx.stroke();
        }
        console.log('Retrieved data from server: ' + evt.data);
    }
    function onError(evt) {
        console.log('Error occured: ' + evt);
    }
    function send(msg) {
        websocket.send(msg);
    }
    $(function () {
        LWcanvas = document.getElementById("can_WallPaper");
        LWctx = LWcanvas.getContext("2d");
        lwInit();
    })
    function lwInit() {
        LWcanvas.addEventListener("mousedown", mouseDownOnKey, false);
        LWcanvas.addEventListener("mousemove", mouseMoveOnKey, false);
        LWcanvas.addEventListener("mouseup", mouseUpOnKey, false);
        LWcanvas.addEventListener("mouseout", mouseUpOnKey, false);
    }
    function mouseDownOnKey(e) {
        if (isController) { 
            isKeyDown = true;
            var canvasOffset = $(LWcanvas).offset();
            LWctx.beginPath();
            LWctx.lineWidth = paintDiameter;
            LWctx.lineCap = 'round';
            LWctx.lineJoin = 'round';
            LWctx.strokeStyle = paintColor;
            LWctx.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
            send("move|" + (e.pageX - canvasOffset.left) + "|" + (e.pageY - canvasOffset.top));
        }
    }
    function mouseMoveOnKey(e) {
        if (isController) { 
            if (isKeyDown) {
                var canvasOffset = $(LWcanvas).offset();
                LWctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
                send("line|" + (e.pageX - canvasOffset.left) + "|" + (e.pageY - canvasOffset.top));
                LWctx.stroke();
            }
        }
    }
    function mouseUpOnKey(e) {
        if (isController) { 
            if (isKeyDown) {
                isKeyDown = false;
                LWctx.stroke();
                undoRecord[undoRecord.length] = LWcanvas.toDataURL();
            }
        }
    }
    $(function () {
        runIsControllerReflesh();
    })
    function runIsControllerReflesh() {
        isControllerTimeoutId = setTimeout(runIsControllerReflesh, 2000);
        getIsController();
        if (!doNext) {
            clearTimeout(isControllerTimeoutId);
        }
    }
    function getIsController() {
        var userName = "@(ViewBag.UserName)";
        $.ajax({
            url: '@(Url.Action("GetController", "ClientAgent"))',
            data: { userName: userName },
            success: function (result) {
                isController = result == "1";
                if (isController) {
                    $("#loveTitle").html("您已授权，请用画笔在下面的画布上画画");
                }
                else {
                    $("#loveTitle").html("您还未授权，请联系管理员");
                }
            }
        })
    }
    function sendMessage() {
        var text = $("#txtMessage").val();
        send(text);
    }
</script>
<ul>
</ul>
您的ID号为：@(ViewBag.UserName)，<span class="error" id="loveTitle">您还未授权，请联系管理员</span>
<div>

</div>
@*<textarea rows="5" cols="30" id="txtMessage">
</textarea><input type="button" value="发送" id="btnSend" onclick="sendMessage()" />*@
<br />
<canvas id="can_WallPaper" width="500px" height="500px" style="cursor: default;">
                您的浏览器不支持HTML5，请升级浏览器后使用此功能。
</canvas>
